<!--
Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements.  See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License.  You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<h2 mat-dialog-title>Import New Resource</h2>
<div class="import-new-flow-dialog">
    <form class="import-new-flow-form" [formGroup]="importNewFlowForm">
        <mat-dialog-content>
            <context-error-banner [context]="ErrorContextKey.CREATE_DROPLET"></context-error-banner>
            <div class="flex justify-between items-center">
                <div class="w-full flex flex-1 items-center">
                    <mat-form-field class="w-full">
                        <mat-label>Name</mat-label>
                        <input matInput type="text" placeholder="Create a unique name" formControlName="name" />
                    </mat-form-field>
                    <div class="version-count ml-2">v.1</div>
                </div>
            </div>
            <mat-label class="flex mb-2">Resource</mat-label>
            <mat-form-field class="w-full">
                <input
                    class="pointer"
                    (click)="flowUploadControl.click()"
                    matInput
                    formControlName="definition"
                    type="text"
                    placeholder="Choose a file"
                    [readonly]="true" />
                <button
                    matSuffix
                    type="button"
                    class="upload-flow-definition tertiary-color icon icon-template-import mr-2.5 pointer"
                    title="Browse"
                    (click)="flowUploadControl.click()">
                    <input type="file" #flowUploadControl class="hidden" (change)="attachFlowDefinition($event)" />
                </button>
            </mat-form-field>

            @if (fileToUpload) {
                <div>
                    <div class="flex flex-col gap-y-3 mb-3">
                        <div class="flex flex-col">
                            <div>File to upload</div>
                            <div class="flex justify-between items-center">
                                <div class="tertiary-color font-medium">{{ fileNameAttached }}</div>
                                <button
                                    class="pointer"
                                    aria-label="Remove attached resource"
                                    (click)="removeAttachedFlowDefinition()">
                                    X
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            }
            <div class="w-full flex flex-col">
                <mat-label class="mb-2">Bucket</mat-label>
                <mat-form-field class="flex">
                    <mat-select
                        #bucketSelect
                        panelClass="bucket-dropdown-select"
                        placeholder="Choose a location"
                        formControlName="bucket">
                        @for (bucket of writableBuckets; track bucket) {
                            <mat-option [value]="bucket.identifier">
                                {{ bucket.name }}
                            </mat-option>
                        }
                    </mat-select>
                </mat-form-field>
            </div>
            <mat-form-field class="w-full">
                <mat-label class="mb-2">Description</mat-label>
                <textarea matInput class="mb-2 w-full" formControlName="description"></textarea>
            </mat-form-field>
        </mat-dialog-content>
    </form>
    <mat-dialog-actions align="end">
        <button mat-button mat-dialog-close type="button">Cancel</button>
        <button
            [disabled]="!importNewFlowForm.valid"
            class="ml-2"
            data-automation-id="import-new-versioned-flow-button"
            (click)="importNewFlow()"
            type="button"
            mat-flat-button>
            Import
        </button>
    </mat-dialog-actions>
</div>
